let time;
setPage();
$('.add #name').on('input', () => {
    clearTimeout(time);
    time = setTimeout(() => {
        if (!(/^[a-z]\w{7,15}$/).test($('.add #name').val())) {
            $('.add .name').css({
                borderColor: 'rgb(172, 55, 55)'
            }).find('span').css({
                borderColor: 'rgb(172, 55, 55)',
                backgroundColor: 'rgb(249, 195, 195)'
            })
            throw ('请按格式输入姓名');
        } else {
            $('.add .name').css({
                borderColor: 'rgb(32, 143, 18)'
            }).find('span').css({
                borderColor: 'rgb(32, 143, 18)',
                backgroundColor: 'rgb(195, 246, 195)'
            })
        }
    }, 500)
})
$('.mask #name').on('input', () => {
    clearTimeout(time);
    time = setTimeout(() => {
        if (!(/^[a-z]\w{7,15}$/).test($('.mask #name').val())) {
            $('.mask .name').css({
                borderColor: 'rgb(172, 55, 55)'
            }).find('span').css({
                borderColor: 'rgb(172, 55, 55)',
                backgroundColor: 'rgb(249, 195, 195)'
            })
            throw ('请按格式输入姓名');
        } else {
            $('.mask .name').css({
                borderColor: 'rgb(32, 143, 18)'
            }).find('span').css({
                borderColor: 'rgb(32, 143, 18)',
                backgroundColor: 'rgb(195, 246, 195)'
            })
        }
    }, 500)
})
$('.add #telephone').on('input', () => {
    clearTimeout(time);
    time = setTimeout(() => {
        if (!(/^\d{11}$/).test($('.add #telephone').val())) {
            $('.add .telephone').css({
                borderColor: 'rgb(172, 55, 55)'
            }).find('span').css({
                borderColor: 'rgb(172, 55, 55)',
                backgroundColor: 'rgb(249, 195, 195)'
            })
            throw ('请输入正确的手机号')
        } else {
            $('.add .telephone').css({
                borderColor: 'rgb(32, 143, 18)'
            }).find('span').css({
                borderColor: 'rgb(32, 143, 18)',
                backgroundColor: 'rgb(195, 246, 195)'
            })
        }
    }, 500)
})
$('.mask #telephone').on('input', () => {
    clearTimeout(time);
    time = setTimeout(() => {
        if (!(/^\d{11}$/).test($('.mask #telephone').val())) {
            $('.mask .telephone').css({
                borderColor: 'rgb(172, 55, 55)'
            }).find('span').css({
                borderColor: 'rgb(172, 55, 55)',
                backgroundColor: 'rgb(249, 195, 195)'
            })
            throw ('请输入正确的手机号')
        } else {
            $('.mask .telephone').css({
                borderColor: 'rgb(32, 143, 18)'
            }).find('span').css({
                borderColor: 'rgb(32, 143, 18)',
                backgroundColor: 'rgb(195, 246, 195)'
            })
        }
    }, 500)
})

$('.add .keep').click(() => {
    let obj = {};
    if ($('.add #name').val() === '' || $('.add #telephone').val() === '' || $('.add #education').val() === '' || $('.add #age').val() === '' || $('.add #money').val() === '') return;
    obj.name = $('.add #name').val();
    obj.telephone = $('.add #telephone').val();
    obj.education = $('.add #education').val();
    obj.age = $('.add #age').val();
    obj.money = $('.add #money').val();
    console.log(obj);
    let tableArr = window.localStorage.getItem('table');
    console.log(tableArr)
    if (tableArr === null) {
        window.localStorage.table = JSON.stringify([obj]);
    } else {
        tableArr = JSON.parse(tableArr);
        if (tableArr.length === 0) {
            tableArr.unshift(obj);
            window.localStorage.table = JSON.stringify(tableArr);
        } else {
            let bool = true;
            tableArr.forEach(item => {
                if (item.telephone === obj.telephone) {
                    alert('请勿重复添加相同手机号');
                    bool = false;
                }
            })
            if (bool) {
                tableArr.unshift(obj);
                window.localStorage.table = JSON.stringify(tableArr);
            }
        }
    }
    setPage();
})
$('.add .set').click(() => {
    $('.add input').val('');
})
const oTbody = document.querySelector('tbody');
oTbody.addEventListener('click', event => {
    if (event.target.getAttribute('class') === 'change') {
        $('.mask').css('display', 'block');
        $('.mask .change').attr('telephone', event.target.getAttribute('telephone'));
    } else if (event.target.getAttribute('class') === 'del') {
        let tableArr = JSON.parse(window.localStorage.table);
        if (window.confirm('您确定要删除吗')) {
            for (let i = 0; i < tableArr.length; i++) {
                if (tableArr[i].telephone === event.target.getAttribute('telephone')) {
                    tableArr.splice(i, 1);
                    break;
                }
            }
            window.localStorage.table = JSON.stringify(tableArr);
            setPage();
        } else {
            return;
        }
    }
})
$('.mask .off').click(() => {
    $('.mask').css('display', 'none');
    $('.mask .change').attr('telephone', '');
})
$('.mask .change').click(() => {
    let obj = {};
    let tableArr = JSON.parse(window.localStorage.table);
    if ($('.mask #name').val() === '' || $('.mask #telephone').val() === '' || $('.mask #education').val() === '' || $('.mask #age').val() === '' || $('.mask #money').val() === '') return;
    obj.name = $('.mask #name').val();
    obj.telephone = $('.mask #telephone').val();
    obj.education = $('.mask #education').val();
    obj.age = $('.mask #age').val();
    obj.money = $('.mask #money').val();
    if (window.confirm('您确定要修改吗')) {
        for (let i = 0; i < tableArr.length; i++) {
            if (tableArr[i].telephone === $('.mask .change').attr('telephone')) {
                tableArr[i] = obj;
                break;
            }
        }
        window.localStorage.table = JSON.stringify(tableArr);
        setPage();
        $('.mask').css('display', 'none');
        $('.mask input').val('');
    } else {
        return;
    }
})
$('.mask .dialog').mousedown(function (event) {
    let divX = this.offsetLeft;
    let divY = this.offsetTop;
    let mouseX = event.clientX;
    let mouseY = event.clientY;
    // let dialogX = this.offsetWidth;
    // let dialogY = this.offsetHeight;
    // let windowY = document.documentElement.clientHeight;
    // let windowX = document.documentElement.clientWidth;
    // console.log(dialogX,dialogY);
    $(window).mousemove(function (event) {
        let disX = event.clientX - mouseX;
        let disY = event.clientY - mouseY;
        let x = disX + divX;
        let y = disY + divY;
        // x = x < 0? 0: x;
        // y = y < 0? 0: y;
        // x = x > windowX - dialogX? windowX - dialogX: x;
        // y = y > windowY - dialogY? windowY - dialogY: y;
        $('.mask .dialog').css({
            top: y + 'px',
            left: x + 'px',
        })
    })
})
$('.mask .dialog').mouseup(function () {
    document.onmousemove = null;
    document.onmouseup = null;
})




function setPage() {
    let tableArr = window.localStorage.getItem('table');
    if (tableArr === null) {
        $('tbody').html('<tr><td colspan="6" style="text-align:center">没有匹配数据</td></tr>');
    } else {
        tableArr = JSON.parse(tableArr);
        if (tableArr.length === 0) {
            $('tbody').html('<tr><td colspan="6" style="text-align:center">没有匹配数据</td></tr>');
        } else {
            let str = '';
            tableArr.forEach(item => {
                str += `
                    <tr>
                        <td>${item.name}</td>
                        <td>${item.telephone}</td>
                        <td>${item.education}</td>
                        <td>${item.age}</td>
                        <td>${item.money}</td>
                        <td><button class="change" telephone="${item.telephone}">修改</button><button class="del" telephone="${item.telephone}">删除</button></td>
                    </tr>`;
            })
            $('tbody').html(str);
        }
    }
}